<template>
  <div class="profile">
    <profile-nav />
    <profile-top  />
    <profile-middle />
    <profile-bottom />
  </div>
</template>

<script>
import ProfileBottom from "./ProfileBottom.vue";
import ProfileMiddle from "./ProfileMiddle.vue";
import ProfileNav from "./ProfileNav.vue";
import ProfileTop from "./ProfileTop.vue";

export default {
  name: "",
  components: {
    ProfileNav,
    ProfileTop,
    ProfileMiddle,
    ProfileBottom
  },
  data() {
    return {
      // userInfo: {}
    };
  },
  computed: {
    
  },
  created() {
    
  },
  watch:{

  },
  mounted(){
    // this.getUserInfo()
  },
  activated() {
    
  },
  methods: {
    // getUserInfo() {
    //   this.userInfo =
    //     JSON.parse(localStorage.getItem("userInfo")) ||
    //     (this.$store.state.user && this.$store.state.user);
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.profile{
  overflow: hidden;
}
</style>
